import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

type PermissionDescriptionProps = {};

const PermissionDescription: React.FC<PermissionDescriptionProps> = (props) => {
  const { t } = useTranslation();
  const route = useRoute<RouteProp<any>>();
  const permissionDescriptions: string[] | undefined =
    route.params?.permissionDescriptions;
  const safeAreaInsets = useSafeAreaInsets();
  const navigation = useNavigation();
  return (
    <>
      <TouchableWithoutFeedback onPress={() => navigation.goBack()}>
        <View
          className="flex-1 px-4 bg-black/20"
          style={{ paddingTop: safeAreaInsets.top + 16 }}
        >
          <View className="bg-white rounded-[14px] items-start px-3 gap1 p-2">
            <Text className="text-[18px] font-semibold text-black text-center mb-1">
              {t('sys.app.permission.requesting.desc')}
            </Text>
            {permissionDescriptions?.map((item, index) => (
              <Text key={index} className="text-[16px] text-text2">
                {item}
              </Text>
            ))}
          </View>
        </View>
      </TouchableWithoutFeedback>
    </>
  );
};

export default React.memo(PermissionDescription);
